<template>
    <div class="login-wrapper">
        <div class="login-bg"></div>
        <div class="login-form">
            <h3>超级管理登录</h3>
            <p>便捷、安全、可靠的超级云管理平台</p>
            <el-form :model="login" status-icon :rules="loginRules" ref="loginForm" label-width="100px">
                <el-form-item prop="data.username">
                    <el-input v-model.number="login.data.username" placeholder="用户名称"></el-input>
                </el-form-item>
                <el-form-item prop="data.password">
                    <el-input type="password" size="medium" v-model="login.data.password" auto-complete="off" placeholder="用户密码"></el-input>
                </el-form-item>
                <!-- <el-form-item>
                    <el-checkbox v-model="keepLogin">保持登录状态</el-checkbox>
                </el-form-item> -->
                <el-form-item prop="data.checkcode">
                    <el-input size="medium" v-model="login.data.checkcode" placeholder="验证码" style="width: 245px;"></el-input>
                    <div class="checkcode">
                        <span class="el-icon-loading"></span>
                        <img ref="checkcode" :src="checkcodeImg" @click="refreshCheckcode()">
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" @click="submitForm('loginForm')" :disabled='login.submitLock'>
                        登 录 <span class="el-icon-loading" v-if='login.submitLock'></span>
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="copyright">
                <p>SOFT BY UTHINKS</p>
                <p>© 2022. All RIGHT RESERVED.</p>
            </div>
        </div>
    </div>
</template>

<script>
import {domain} from '@/api';
let _this;

export default {
    data() {
        var checkUsername = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            login: {
                submitLock: false,
                data: {
                    username: 'jiang',
                    password: '123123',
                    checkcode: '',
                }
            },
            checkcodeImg: domain.ac + '/public/create-code',
            keepLogin: false,
            loginRules: {
                data: {
                    username: [
                        { validator: checkUsername, trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkcode: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ],
                }
            }
        };
    },
    mounted() {
        _this = this
    },
    methods: {
        /*提交登录*/
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {

                if (valid && !this.login.submitLock) {
                    this.login.submitLock = true;
                    /*登录*/
                    this.$baseURL(domain.ac)
                    this.$post(this.$api.login, {
                        Admin: this.login.data
                    }).then(res => {
                        // console.log(res);
                        /*成功*/
                        if(res.data.code == 0){
                            this.$cookie.set('isLogin', true);//成功状态
                            this.$emit('setLogin', true);//更改父组件登录状态
                            this.$localstorage.set('uinfo', JSON.stringify(res.data.data));//保存登录信息

                            /*判断最后使用的路由，如果有，直接跳转到页面*/
                            let lastUrl = this.$localstorage.get('lastUrl')
                            if(lastUrl){
                                // console.log(lastUrl, 555)
                                window.open(lastUrl, '_self');
                            }
                        }else{
                            this.$message({
                                showClose: true,
                                message: res.data.info,
                                type: 'error'
                            });
                            if(res.data.code == 10008){//如果是验证码错误
                                this.login.data.checkcode = ''
                                this.refreshCheckcode()//刷新验证码
                            }
                        }
                        this.login.submitLock = false;
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }

            });
        },
        /*刷新验证码*/
        refreshCheckcode(){
            let tmp = this.$refs.checkcode.src
            this.$refs.checkcode.src = ''
            this.$refs.checkcode.src = tmp
        }
    }
}
/*监听键盘回车键*/
document.onkeydown = (e) => {
    let keyCode = window.event.keyCode
    if(keyCode == 13){
        _this.submitForm('loginForm')
    }
}
</script>

<style lang="stylus" scoped>
.login-wrapper
    position: fixed
    left: 0
    top: 0
    z-index: 1000
    .login-bg
        animation: bg-show .6s forwards
        &::before
            content: ""
            position: fixed
            top: 0
            left: 0
            width: 100%
            height: 100%
            background-image: url("./login.jpg")
            background-size: cover
            z-index: -1
        &::after
            content: ""
            position: fixed
            top: 0
            left: 0
            width: 100%
            height: 100%
            background-color: rgba(38, 50, 56, .6)
            z-index: 0
    .login-form
        width: 470px
        height: 100%
        padding: 100px 60px 180px
        box-sizing: border-box
        position: fixed
        top: 0
        right: -470px
        opacity: 0
        background-color: #fff
        animation: form-pull .6s forwards
        h3
            font-size: 24px
            font-weight: normal
            margin-bottom: 10px
        p
            color: #76838f
        form
            margin-top: 50px
            .el-form-item
                margin-bottom: 20px
            // .el-form-item:nth-child(3)
            //     margin-bottom: 10px
            /deep/ .el-form-item__content
                margin-left: 0 !important
                button
                    width: 100%
            .checkcode
                float: right
                cursor: pointer
                width: 94px
                height: 36px
                text-align: center
                line-height: 36px
                border: 1px solid #DCDFE6
                position: relative
                span
                    position: absolute
                    left: 42%
                    top: 30%
                img
                    width: 100%
                    height: 100%
                    position: absolute
                    left: 0
                    top: 0
        .copyright
          position: absolute
          bottom: 0
          left: 0
          right: 0
          margin: 50px 60px
          text-align: center
          font-size: 12px
@keyframes bg-show
    from
        opacity: 0
    to
        opacity: 1
@keyframes form-pull
    from
        right: -470px
        opacity: 0
    to
        right: 0
        opacity: 1
</style>